<template>
    <div class="login" >
        
        <Row>
            <Col span="24">
            <div class="content ">
                
                <Form ref='data' :model="data" class="card-box loginform" :rules="rule_data" >
                    <h3 class="title" >用户注册</h3>
    
                    <!-- <Form-item prop="email" >
                        <Input type="text" placeholder="邮箱" v-model="data.email">
                        <Icon type="ios-email-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item> -->
                    <Form-item prop="username">
                        <Input type="text" placeholder="登录名" v-model="data.username">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item prop="password">
                        <Input type="password" placeholder="密码" v-model="data.password">
                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item prop="password2">
                        <Input type="password" placeholder="密码确认" v-model="data.password2">
                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item prop="orgname">
                        <Input type="text" placeholder="机构名称" v-model="data.orgname">
                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item prop="orgcode">
                        <Input type="text" placeholder="机构代码" v-model="data.orgcode">
                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item prop="parentOrgcode">
                        <Input type="text" placeholder="总公司机构代码" v-model="data.parentOrgcode">
                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>

    
                    <Form-item>
                        <Button type="success" long @click="handleSubmit('data')" :loading="loading">
                            <span v-if="!loading">注册</span>
                            <span v-else>注册中...</span>
                        </Button>
                    </Form-item>
                    <hr>
                    <div class="bottom">
                        <span><router-link to="/login">立即登录</router-link></span>
                    </div>
                </Form>
    
            </div>
            </Col>
        </Row>

        <Modal
        v-model="showSuccess"
       class-name="vertical-center-modal"
        width="360">

         <!-- <p slot="header" style="color:#f60;text-align:center">
            <Icon type="information-circled"></Icon>
            <span>恭喜您！注册成功</span>
        </p> -->
        <p slot="header">
            <span>提示</span>
        </p>
        <div style="color:#f60;text-align:center">
            <!-- <p>已向您邮箱发送了一封验证邮件，请尽快验证！</p> -->
            <Icon type="information-circled"></Icon>
            <span>恭喜您！注册成功</span>
        </div>
        <div slot="footer">
            <Button type="primary" size="large" long  @click="toLogin">去登录</Button>
        </div>

        <p></p>
    </Modal>
    </div>
</template>

<script>
export default {
    name: 'login',
    data() {

        const email =(rule,value,callback)=>{
            this.axios.post("/login/checkEmail", { email: value }).then((res) => {
                if (res.errorCode == 0) {
                    callback();
                } else {
                    callback(new Error(res.message));
                }
            }).catch((error) => {
                callback(new Error("验证失败！"));
            })
        }
        const validateUserName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('用户名不能为空'));
            }

            this.axios.post("/login/checkUserName", { userName: value }).then((res) => {
                if (res.errorCode == 0) {
                    callback();
                } else {
                    callback(new Error(res.message));
                }
            }).catch((error) => {
                callback(new Error("验证失败！"));
            })
        };
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.data.password2 !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.data.validateField('password2');
                }
                callback();
            }
        };
        const validatePassCheck = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.data.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };

        return {
            winSize: {
                width: '',
                height: ''
            },

            formOffset: {
                position: 'absolute',
                left: '',
                top: ''
            },

            data: {
                email: '',
                username: '',
                password: '',
                password2: '',
                orgname:'',
                orgcode:'',parentOrgcode:''
            },

            rule_data: {
                // email: [
                //     { required: true, message: '请输入邮箱', trigger: 'blur' },
                //     { type: 'email', message: '邮箱格式不正确', trigger: 'blur' },
                //     {validator:email,trigger:'blur'}
                // ],
                username: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { validator: validateUserName, trigger: 'blur' },
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                ],
                password2: [
                    { validator: validatePassCheck, trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                ],orgname:[
                    { required: true, message: '机构名字不能为空', trigger: 'blur' },
                ],orgcode:[
                    { required: true, message: '机构代码不能为空', trigger: 'blur' },
                ]
            },
            loading: false,
            showSuccess: false
        }
    },
    methods: {
        setSize() {
            this.winSize.width = $(window).width() + "px";
            this.winSize.height = $(window).height() + "px";

            this.formOffset.left = (parseInt(this.winSize.width) / 2 - 175) + 'px';
            this.formOffset.top = (parseInt(this.winSize.height) / 2 - 220) + 'px';
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.axios.post("/login/register", this.data, { timeout: 20000 }).then((res) => {
                        if (res.errorCode == 0) {
                            // this.$Message.success(res.message);
                            this.showSuccess = true;
                        } else {
                            //this.$Message.error(res.message);
                        }
                        this.loading = false;
                    }).catch((error) => {
                        this.loading = false;
                    })
                } else {
                    this.$Message.error('请完善您的信息!');
                }
            })
        },
        toLogin() {
            this.$router.push("login");
        }
    },
    created() {
        // this.setSize();
        // $(window).resize(() => {
        //     this.setSize();
        // });
    },
    mounted() {
        // console.log(this.remumber);

        //如果上次登录选择的是记住密码并登录成功，则会保存状态，用户名以及token
        // if (this.remumber.remumber_flag === true) {
        //     this.data.username = this.remumber.remumber_login_info.username;
        //     this.data.password = this.remumber.remumber_login_info.token.substring(0, 16);
        //     this.$set(this.data, 'token', this.remumber.remumber_login_info.token);
        // }
    }
}
</script>

<style scoped lang='less'>
.login {
    background: #1F2D3D;
    .ivu-form-item {
        margin-bottom: 20px;
    }
    .bottom {
        padding-bottom: 10px;
        margin-top: 10px; // color: red;
    }
    .bottom span {
        float: right;
        margin-left: 20px;
    }
    .title {
        // padding-left: 30px;
        font-size: 20px;
    }
    .card-box {
        box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin-bottom: 100px;
        background-color: #F9FAFC;
        border: 2px solid #8492A6;
    }

    .title {
        margin: 0px auto 20px auto;
        text-align: center;
        color: #505458;
    }

    .loginform {
        width: 450px;
        margin:0px auto;margin-top:50px;margin-bottom: 90px;
        padding: 25px 35px 15px 35px;
    }
}
</style>
